<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>订单评价</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css"/>
    <link rel="stylesheet" href="__SCRIPT__/webuploader/webuploader.css" ><!--webUploader上传组件-->
    <link rel="stylesheet" href="__SCRIPT__/webuploader/style.css" ><!--webUploader上传组件-->
    <link href="__JSS__/plugins/layui/css/layui.css" rel="stylesheet">
    <style>

        .box{
            width:1180px;
            /*height:614px;*/
            background:rgba(255,255,255,1);
            margin:40px auto;
            padding-top:37px;
            padding-bottom:32px;
        }
        .hidden {
            display: none !important;
        }
        .tit{
            font-size:22px;
            font-weight:600;
            color:rgba(51,51,51,1);
            align-items: center;
            margin-left:40px;
            margin-right:98px;
            margin-bottom:37px;
        }
        .arrow{
            width:20px;
            height:20px;
            margin-right:8px;
            cursor: pointer;
        }
        .one{
            align-items: center;
            font-size:14px;
            font-weight:400;
            padding-left:100px;
            margin-bottom:32px;
        }
        .left{
            width:98px;
            color:rgba(51,51,51,1);
        }
        .star{
            width:32px;
            height:32px;
            background: url(__IMG__/star1.png) no-repeat center center;
            background-size: 32px 32px;
        }
        .unstar{
            width:32px;
            height:32px;
            background: url(__IMG__/star2.png) no-repeat center center;
            background-size: 32px 32px;
        }
        .label{
            width:104px;
            height:32px;
            border-radius:4px;
            border:1px solid rgba(221,221,221,1);
            font-size:14px;
            font-weight:400;
            color:rgba(102,102,102,1);
            line-height:32px;
            text-align: center;
            margin-right:16px;
        }
        .label_active{
            background:rgba(252,43,64,0.1);
            border:none;
            color:rgba(252,43,64,1);
        }
        .card{
            width:980px;
            background:rgba(244,244,244,1);
            border-radius:4px;
            margin: auto;
            padding:0 24px 24px;
        }
        textarea{
            width:100%;
            /*height:126px;*/
            height:50px;
            padding:16px 0;
            margin:0;
            border:0;
            font-size:14px;
            color:rgba(51,51,51,1);
            background:transparent;
            word-wrap: break-word;
            word-break: break-all;
            overflow-y: auto;
            resize:none;
            font-family: sans-serif;
            outline: none;
        }
        textarea::-webkit-input-placeholder{
            font-size:14px;
            color:#999;
            font-weight: 400;
            font-family: sans-serif;
        }
        .add{
            width:90px;
            height:90px;
            border-radius:4px;
            margin-bottom:3px;
        }
        .addTxt{
            font-size:14px;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .btn{
            width:88px;
            height:32px;
            background:rgba(252,43,64,1);
            font-size:14px;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:32px;
            text-align: center;
            margin:40px auto 0;
            border-radius:4px;
            font-family: sans-serif;
            cursor: pointer;
        }
        #order,
        #about,
        #user {
            display: none;
        }
    </style>
</head>
<body>
{include file="public/header"}
<div class="box container">
    <div class="tit flex-wrap">
        <img src="__IMG__/left_arrow.png" class="arrow" onclick="history.go(-1);">
        <div class="flex-con">订单评价（{$order.order_num}）</div>
    </div>
    <form id="fabuorder">
    <div class="one flex-wrap">
        <div class="left">满意度</div>
        <div class="xing star"></div>
        <div class="xing star"></div>
        <div class="xing star"></div>
        <div class="xing star"></div>
        <div class="xing star"></div>
    </div>
    <div class="one flex-wrap">
        <div class="left">评价标签</div>
        <div class="label">态度好</div>
        <div class="label">态度好</div>
    </div>
    <div class="card">
        <textarea placeholder="谈谈你对本次物流的评价吧" name="evaluate_content"></textarea>
        <!--<img src="__IMG__/add_img1.png" class="add">-->
        <!--<div class="addTxt">添加评论图片</div>-->
    </div>
    <div class="flex-wrap">
        <!--<div class="c_l c_l4" style="font-size: 14px">上传货物图片</div>-->
        <div class="layui-form-item layui-col-md-offset1 layui-col-md10">
            <div class="layui-input-block" style="margin: 0">
                <input type="hidden" name="evaluate_img" id="photo" lay-verify="image">
                <div id="uploader" class="container-s">
                    <div class="queueList" style="border: none">
                        <div class="placeholder" style="min-height: 100px;text-align: center;">
                            <div id="filePicker"></div>
                            <p>添加评论图片</p>
                        </div>
                    </div>
                    <div class="statusBar" style="display:none;">
                        <div class="layui-progress layui-progress-big active-s" lay-showpercent="true">
                            <div class="layui-progress-bar layui-bg-blue" lay-percent="0%">
                            </div>
                            <span></span>
                        </div>
                        <div class="info"></div>
                        <div class="btns">
                            <div id="goPicker" class="filePicker2"></div>
                            <div class="uploadBtn">开始上传</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!---->
    <input type="hidden" name="evaluate_star" id="evaluate_star" value="5" />
    <input type="hidden" name="evaluate_review" id="evaluate_review" value="1" />
    <input type="hidden" name="evaluate_bq" id="evaluate_bq" value="" />
    <input type="hidden" name="order_id" id="order_id" value="{$id}" />
    <input type="hidden" name="evaluate_b_user_id" id="evaluate_b_user_id" value="{$order.order_jms_user}" />
    <!---->
        <!--防止重复提交-->
        <input type="hidden" name="repeatSubmit" id="repeatSubmit" value="1" />
        <!---->
    <div class="btn" onclick="submitOrder();">提交评价</div>
    </form>
</div>
</body>
</html>
<script src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="__SCRIPT__/xydd.js"></script>
<script type="text/javascript" src="__ADMINJS__/plugins/layui/layui.all.js"></script>
<script type="text/javascript" src="__SCRIPT__/wk.js"></script>
<script type="text/javascript" src="__SCRIPT__/webuploader/webuploader.js"></script>

<script type="text/javascript">
$('.xing').click(function () {
    var index = $(this).index();
    $('.xing').each(function (i,d) {
        if(i < index){
            $('.xing').eq(i).removeClass('unstar');
            $('.xing').eq(i).addClass('star');
        }else{
            $('.xing').eq(i).removeClass('star');
            $('.xing').eq(i).addClass('unstar');
        }

    });
    var star_length = $('.star').length;
    var star_level = 1;
    if(star_length <= 3){
        star_level = 3
    }
    if(star_length == 4){
        star_level = 2
    }
    $('#evaluate_star').val(star_length);
    $('#evaluate_review').val(star_level);
});
$('.label').click(function () {
    if($(this).hasClass('label_active')){
        $(this).removeClass('label_active');
    }else{
        $(this).addClass('label_active');
    }
    var str = '';
    $('.label_active').each(function (i,d) {
        str += $(d).text() + ',';
    });
    $('#evaluate_bq').val(str);
});
</script>
<script>
    var n = wk.uploads({num:19,type:'jpg,png,jpeg',url:"{:url('shop/Upload/upload')}"});
    function imgDel(e,obj){
        wk.uploads_del(e,obj,n,"{:url('home/upload/deleteLocality')}");
    }
    //
    function submitOrder() {
        var repeatSubmit = $('#repeatSubmit').val();
        if(repeatSubmit == 2){
            alert('请勿重复提交！');
            return false;
        }else{
            $('#repeatSubmit').val(2);
            $.ajax({
                url:"{:url('shop/Order/comment')}",
                type:'post',
                data:$('#fabuorder').serialize(),
                dataType:'json',
                success:function(returnData){
                    alert(returnData.msg);
                    if(returnData.status == 200){
                        window.location.href = '/shop/Order/index';
                        return true;
                    }else{
                        $('#repeatSubmit').val(1);
                    }
                }
            })
        }

    }
</script>